<!DOCTYPE html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('编辑博客')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: bootstrap-tagsinput-css"/>
</head>


<body class="gray-bg">
<div class="ui-layout-west">
    <div class="main-content">
        <div class="box box-main">
            <div class="box-header">
                <div class="box-title">
                    <i class="fa icon-grid"></i> 博客概览
                </div>
                <div class="box-tools pull-right">
                    <button type="button" class="btn btn-box-tool" id="btnRefresh" title="刷新列表">
                        <i class="fa fa-refresh"></i></button>
                </div>
            </div>
            <div class="ui-layout-content">
                <form id="blogUpdateForm">
                    <input type="hidden" name="blogId" th:value="${blog.blogId}">
                    <input type="hidden" id="blogContentInit" th:value="${blog.content}">
                    <div class="form-group">
                        <label class="control-label">封面:</label>
                        <img src="/img/blog-default.png" width="100%" onclick="changeImg()"
                             height="150px" id="header" name="headerImg" title="点击图片更换标图" th:src="${blog.headerImg}"/>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">标题:</label>
                        <div class="">
                            <input type="text" class="form-control" name="title" placeholder="在这里输入标题"
                                   th:value="${blog.title}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">摘要:</label>
                        <div class="">
                            <input type="text" class="form-control" name="summary" placeholder="在这里输入摘要"
                                   th:value="${blog.summary}">
                            <span class="help-block m-b-none">
                                    <i class="fa fa-info-circle"></i> 留空则默认为博文前150字节为博文的摘要</span>
                        </div>
                    </div>
                    <div>
                        <label class="">标签:</label>
                        <div class="tagsinput-primary form-group">
                            <input name="tags" id="tags" class="tagsinput" data-role="tagsinput"
                                   placeholder="输入后回车">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">权重:</label>
                        <div class="">
                            <input name="weight" class="form-control" type="text" value="0" placeholder="在这里输入权重"
                                   th:value="${blog.weight}">
                            <span class="help-block m-b-none">
                                <i class="fa fa-info-circle"></i> 前台首页展示会以权重作为排序标准</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class=" control-label">分类:</label>
                        <div class="">
                            <div class="input-group" style="width: 100%">
                                <select name="categoryId" class="form-control m-b">
                                    <option value="">请选择分类</option>
                                    <option th:each="category : ${categories}"
                                            th:text="${category.categoryTitle}"
                                            th:value="${category.categoryId}"
                                            th:field="*{blog.categoryId}">
                                    </option>
                                </select>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<div class="container-div ui-layout-center">
    <div class="row">
        <div class="mail-box-header">
            <div class="pull-right tooltip-demo">
                <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                   onclick="editOrPreview(this)" title="预览"><i class="fa fa-pencil"></i> 预览</a>
                <a class="btn btn-white btn-sm" data-toggle="tooltip" data-placement="top"
                   onclick="uploadMd()" title="上传MD文件"><i class="fa fa-pencil"></i> 上传</a>
            </div>
            <h2>
                博客内容
            </h2>
        </div>
        <div class="mail-box">
            <div class="mail-body">
                <div id="summernote" class="summernote"></div>
                <div class="clearfix"></div>
            </div>
            <div class="mail-body text-right tooltip-demo">
                <button type="button" class="btn btn-sm btn-primary" onclick="submitHandler()"><i
                        class="fa fa-check"></i>保 存
                </button>&nbsp;
                <button type="button" class="btn btn-sm btn-danger" onclick="closeItem()"><i
                        class="fa fa-reply-all"></i>关 闭
                </button>
            </div>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: layout-latest-js"/>
<th:block th:include="include :: bootstrap-tagsinput-js"/>
<script th:inline="javascript">
    var tags = [[${blog.tags}]];
    $(function () {
        //添加已有标签
        if (tags != null) {
            $("#tags").tagsinput('add', tags.join(","));
        }
    });
</script>
<script>
    function submitHandler() {
        $.operate.updateTab("/blog/blog/edit", getData());
    }

    $(function () {
        $("#summernote").summernote("code", $("#blogContentInit").val());
        $("#blogUpdateForm").validate({
            rules: {
                headerImg: {
                    required: true,
                },
                title: {
                    required: true,
                    rangelength: [2, 45]
                },
                summary: {
                    maxlength: 200
                },
                weight: {
                    required: true,
                    number: true
                },
                categoryId: {
                    required: true
                },
            },
            messages: {
                "headerImg": {
                    required: "请选择预览图",
                },
                "title": {
                    required: "请输入标题",
                    rangelength: "请输入长度为 {0} 至 {1} 之间的标题"
                },
                "summary": {
                    maxlength: "最多输入{0}个字符"
                },
                "weight": {
                    required: "请输入权重",
                    rangelength: "请输入正确格式的权重"
                },
                "tags": {
                    required: "请输入标签",
                    rangelength: "请输入长度为 {0} 至 {1} 之间的标签"
                },
                "categoryId": {
                    required: "请选择分类",
                },
            },
        });
        var panehHidden = false;
        if ($(this).width() < 769) {
            panehHidden = true;
        }
        //初始化分栏
        $('body').layout({initClosed: panehHidden, west__size: 350});
    });

    /**
     *打开选择图片的窗口
     */
    function imageSelect(index, layero) {
        var body = layer.getChildFrame('body', index);
        //获取上传文件的URL
        var url = body.find("#url").val();
        //获取网络地址URL
        var netUrl = body.find("#netUrl").val();
        if ($.common.isNotEmpty(url) && $.common.isNotEmpty(netUrl)) {
            $.modal.alertError("博文封面只能选择一个哦~，请检查是否有选中图片、上传图片或者图片地址输入！");
            return;
        }
        var urlFinal = $.common.isNotEmpty(url) ? url : netUrl;
        $("#header").attr("src", urlFinal);
        layer.close(index);
    }

    function changeImg() {
        var option = {
            url: "/blog/blog/image",
            title: "素材库",
            width: $(window).width() / 1.5,
            callBack: imageSelect
        };
        $.modal.openOptions(option);
    }


    //获取表单数据
    function getData() {
        var blogId = $("input[name='blogId']").val();
        var headerUrl = $("#header")[0].src;
        var title = $("input[name='title']").val();
        var summary = $("input[name='summary']").val();
        var tags = $("#tags").val();
        var weight = $("input[name='weight']").val();
        var categoryId = $("select[name='categoryId']").val();
        var content = $("#summernote").summernote("code");
        var tagsArray = new Array();
        var data = {
            headerImg: headerUrl,
            title: title,
            summary: summary,
            tags: tags,
            categoryId: categoryId,
            weight: weight,
            content: content,
            blogId: blogId
        }
        return data;
    }
</script>
</body>

</html>